<template>
  <div class="article-list-wrap">
    <h3 class="article-list-classify">{{title=="最新文章" ? title : "当前频道："+title}}</h3>
    <ul class="list-wrap">
      <li class="list-item" v-for="(item,k) in articleList" :key="k">
        <router-link class="link-a hidden-sm-and-up"
                     :to="{name:'detail',query:{classify:item.classify,id:item.id}}"></router-link>
        <router-link :to="{name:'detail',query:{classify:item.classify,id:item.id}}" class="list-img">
          <img :src="item.imgPath" alt="">
        </router-link>
        <div class="list-content-wrap">
          <h3 class="list-title-wrap">
            <span class="list-classify">{{item.classify}}</span>
            <div class="list-title ellipsis-line-1">
              <router-link :to="{name:'detail',query:{classify:item.classify,id:item.id}}">{{item.title}}</router-link>
            </div>
          </h3>
          <div class="list-content ellipsis-line-3">{{item.description}}</div>
          <div class="list-footer">
            <div class="list-data">
              <span><i class="el-icon-time"></i> {{item.createTime}}</span>
              <span>
                <span><i class="el-icon-view"></i> {{item.view}}</span>
                <span><i class="el-icon-chat-dot-square"></i> {{item.msgs}}</span>
              </span>
            </div>
            <el-button class="hidden-xs-only" type="primary" size="mini" @click="toDetail(item.classify,item.id)">
              阅读详情
            </el-button>
          </div>
        </div>
      </li>
    </ul>
    <p v-if="articleList.length==0" class="no-data">暂无数据！</p>
    <el-pagination
      class="page-wrap"
      @current-change="currentPageChange"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import {queryArticleList} from "../../assets/api/getData";

  export default {
    name: "articleList",
    props: {
      title: {
        type: String,
        default: ""
      },
      classify: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        pageNum: 1,
        pageSize: 8,
        total: 0,
        articleList: []
      }
    },
    created() {
      this.getArticleList();
    },
    methods: {
      toDetail(classify, id) {
        this.$router.push({
          name: 'detail', query: {classify, id}
        })
      },
      currentPageChange() {
        this.getArticleList();
      },
      async getArticleList() {
        try {
          let res = await queryArticleList({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            classify: this.classify,
          });
          this.articleList = res.data.rows;
          this.total = res.data.total;
        } catch (err) {
          this.$message.error(err.msg);
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .article-list-wrap {
    background-color: @color-white;
    border-radius: 4px;
    padding: 15px;
    border: 1px solid @color-border;

    .article-list-classify {
      line-height: 1.5;
      padding-bottom: 15px;
      border-bottom: 1px solid @color-border;
      font-weight: normal;
    }

    .list-wrap {
      .list-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid @color-border;
        padding: 20px 0;
        position: relative;

        .list-img {
          overflow: hidden;
          max-width: 230px;
          width: 26%;
          height: 140px;
          margin-right: 30px;

          img {
            width: 100%;
            height: 100%;
            transition: .5s;
          }
        }

        &:hover {
          .list-img {
            img {
              transform: scale(1.1);
            }
          }
        }

        .list-content-wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .list-title-wrap {
            display: flex;
            align-items: center;
            font-weight: normal;

            .list-classify {
              position: relative;
              margin-right: 10px;
              padding: 3px 5px;
              background-color: @color-blue;
              border-radius: 3px;
              font-size: 12px;
              color: #FFFFFF;

              &:after {
                content: "";
                position: absolute;
                right: -10px;
                top: 50%;
                border: 5px solid transparent;
                border-left-color: @color-blue;
                transform: translateY(-50%);
              }
            }

            .list-title {
              flex: 1;
              font-size: 18px;

              a {
                color: #000000;
                transition: .3s;

                &:hover {
                  color: @color-blue;
                }
              }
            }
          }

          .list-content {
            line-height: 1.5;
          }

          .list-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .list-data {
              font-size: 12px;
              color: @color-blue;

              span {
                margin-right: 15px;

                &:last-child {
                  margin-right: 0;
                }
              }
            }
          }
        }

        &:after {
          content: "";
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 0;
          height: 1px;
          background: @color-blue;
          transition: .4s;
        }

        &:hover:after {
          width: 100%;
        }
      }
    }

    .no-data {
      text-align: center;
      color: @color-blue;
      margin: 20px 0;
    }
  }

  @media screen and (max-width: 767px) {
    .article-list-wrap {
      .list-wrap {
        .list-item {
          display: block !important;

          .link-a {
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          }

          .list-img {
            margin-right: 0;
            width: auto;
            max-width: initial;
            height: 100px;
            display: block;
            margin-bottom: 20px;
            text-align: center;

            img {
              width: auto;
            }
          }

          .list-data {
            flex: 1;
            display: flex;
            justify-content: space-between;
          }

          .list-content-wrap {
            height: 130px;
          }
        }
      }
    }

  }
</style>
